<template>
  <section class="phone-wall">
    <div class="main-container">
      <div id="照片墙" class="title scrollpoint sp-effect3">
        <h1 class="title__h1">照片墙</h1>
        <div class="title__line"></div>
        <h3 class="title__h3">Photo Wall</h3>
        <img class="title__icon" src="~@/assets/images/ba.png" />
      </div>
      <div class="photo">
				<div class="phone__row phone__row1 yd-flex-h-hC-vC">
					<div @click="preview(item.img)" v-for="item in row1" :key="item.id" class="phone__item cursor scrollpoint sp-effect5">
						<div class="phone__box">
							<div class="phone__box">
								<div class="phone__box">
									<div class="phone__mask">
										<img class="phone__search" src="~@/assets/images/phone/search.png" />
									</div>
									<img class="phone__img" :src="item.img" />
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="phone__row yd-flex-h-hC-vC">
					<div @click="preview(item.img)" v-for="item in row2" :key="item.id" class="phone__item cursor scrollpoint sp-effect5">
						<div class="phone__box">
							<div class="phone__box">
								<div class="phone__box">
									<div class="phone__mask">
										<img class="phone__search" src="~@/assets/images/phone/search.png" />
									</div>
									<img class="phone__img" :src="item.img" />
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="phone__row phone__row2 yd-flex-h-hC-vC">
					<div @click="preview(item.img)" v-for="item in row3" :key="item.id" class="phone__item cursor scrollpoint sp-effect5">
						<div class="phone__box">
							<div class="phone__box">
								<div class="phone__box">
									<div class="phone__mask">
										<img class="phone__search" src="~@/assets/images/phone/search.png" />
									</div>
									<img class="phone__img" :src="item.img" />
								</div>
							</div>
						</div>
					</div>
				</div>
      </div>
			<div @click="close" :style="{height: previewHeight + 'px'}" class="preview cursor" title="点击关闭">
				<img class="preview__img" :src="previewImg" />
			</div>
    </div>
  </section>
</template>

<script>
import { defineComponent, ref } from "vue";
import phone1 from '@/assets/images/phone/1.png';
import phone2 from '@/assets/images/phone/2.png';
import phone3 from '@/assets/images/phone/3.png';
import phone4 from '@/assets/images/phone/4.png';
import phone5 from '@/assets/images/phone/5.png';
import phone6 from '@/assets/images/phone/6.png';
import phone7 from '@/assets/images/phone/7.png';
import phone8 from '@/assets/images/phone/8.png';
import phone9 from '@/assets/images/phone/9.png';
import phone10 from '@/assets/images/phone/10.png';
import phone11 from '@/assets/images/phone/11.png';
import phone12 from '@/assets/images/phone/12.png';
export default defineComponent({
  setup() {
		const previewHeight = ref(0);
		const previewImg = ref();

    return {
			row1: [
				{ id: 1, img: phone1 },
				{ id: 2, img: phone2 },
				{ id: 3, img: phone3 },
			],
			row2: [
				{ id: 4, img: phone4 },
				{ id: 5, img: phone5 },
				{ id: 6, img: phone6 },
				{ id: 7, img: phone7 },
				{ id: 8, img: phone8 },
				{ id: 9, img: phone9 },
			],
			row3: [
				{ id: 10, img: phone10 },
				{ id: 11, img: phone11 },
				{ id: 12, img: phone12 },
			],
			previewImg,
			previewHeight,
			preview(img) {
				previewHeight.value = window.innerHeight;
				previewImg.value = img;
			},
			close() {
				previewHeight.value = 0;
			}
		};
  },
});
</script>

<style scoped>
.photo{
	margin-top: 30px;
}
.phone__row1{
	position: relative;
	top: 34px;
}
.phone__row2{
	position: relative;
	top: -34px;
}
.phone__item{
	width: 160px;
	height: 190px;
	position: relative;
	overflow: hidden;
	margin-left: 18px;
}
.phone__mask{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(209, 189, 189, 0.7);
	z-index: 10;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	opacity: 0;
	transition: opacity 0.28s;
}
.phone__search{
	width: 35px;
	height: 35px;
}
.phone__box{
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	overflow: hidden;
	transform: rotate(120deg);
}
.phone__img{
	width: 100%;
	height: 100%;
  transition: all 0.2s ease-out;
}
.phone__item:hover .phone__img{
	transform: scale(1.1);
	margin-top: 5%;
}
.phone__item:hover .phone__mask{
	opacity: 1;
}
.preview{
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	width: 100%;
	height: 0px;
	background-color: rgba(0, 0, 0, 0.7);
	overflow: hidden;
	transition: all 0.3s linear;
	display: flex;
	justify-content: center;
	align-items: center;
}
</style>
